<script setup lang="ts">
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { ReplyMessage, getMessageAPIid,ReplyMessageAPI } from '@/services/message';
import type { Message } from '@/types/message';
import { useMemberStore } from '@/stores'
const replyInput = ref('');
const selectedMessage = ref<Message | null>(null);
// 获取Store
const memberStore = useMemberStore()
// 通过路由参数获取消息ID
const getRouteParams = () => {
  const route = getCurrentInstance()?.appContext.config.globalProperties.$route;
  return route?.params || {};
};

// 获取消息ID并初始化消息详情
const fetchMessageDetails = async () => {
  // 从本地缓存获取消息ID
  const messageId = uni.getStorageSync('currentMessageId');
  if (!messageId) {
    console.error('无效的messageId');
    return;
  }
  try {
    const response = await getMessageAPIid(messageId);
    console.log(response);
    selectedMessage.value = response.data.message;
    // 初始化message数组
    // selectedMessage.value.messsages = []
  } catch (error) {
    console.error('获取消息详情失败:', error);
  }
};

const onReply = async () => {
  const replyContent = replyInput.value.trim();
  if (replyContent === '') {
    return;
  }

  const replyData = {
    messageId: selectedMessage.value?.messageId || '',
    msg: replyContent
  };

  try {
    await ReplyMessage(replyData);
    // 回复成功
     // 初始化 messages 数组
        if (!selectedMessage.value?.messages) {
          selectedMessage.value.messages = [];
        }
        // 更新 selectedMessage，只保留文本内容
        const newReply = {
          text: replyContent,
        };
        selectedMessage.value.messages.push(newReply);
        console.log(selectedMessage.value,1)
        // 清空输入框
        replyInput.value = '';
    console.log(replyData);
  } catch (error) {
    console.error('回复消息失败:', error);
    // 回复失败
  }
};
// 在页面加载和显示时获取消息详情
onShow(() => {
  fetchMessageDetails()
})
</script>

<template>
  <view class="chat-container">
    <!-- 显示医生消息和发送时间 -->
    <view class="message-history">
      <view class="message-card">
        <view class="avatar-container">
          <image src="../static/images/OIP.jpg" class="avatar" />
        </view>
        <view class="message-content">
          {{ selectedMessage.doctorMsg }}
          <view class="message-time">{{ selectedMessage.sendTime }}
      </view>
     </view>
      </view>
    </view>
      <!-- 渲染用户的消息 -->
         <view v-for="reply in selectedMessage.messages" class="message-card user-reply">
            <view class="message-content user-reply-content">
              {{ reply.text }}
              <view class="message-time">{{ reply.sendTime }}</view>
            </view>
            <view class="avatar-container"></view>

        </view>
     <!--  <view  class="message-card user-reply">
            <view class="message-content user-reply-content">
              {{ selectedMessage.userMsg }}
              <view class="message-time">{{ selectedMessage.sendTime }}</view>
            </view>
            <view class="avatar-container"></view>

        </view> -->
   <view class="input-container">
         <textarea v-model="replyInput" placeholder="输入你的回复" class="input-field"></textarea>
         <button @click="onReply" class="reply-button">回复</button>
       </view>
  </view>

</template>

<style scoped>
  /* 样式调整 */
  .chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 20px;
  }

  .message-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .message-history {
    flex-grow: 1;
    overflow-y: auto;
  }

  .message-card {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .avatar-container {
    margin-right: 10px;
  }

  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .message-content {
    max-width: 70%;
    background-color: #e0f2f1;
    padding: 10px;
    border-radius: 10px;
  }

  .message-time {
    font-size: 12px;
    color: #888;
    margin-top: 5px;
  }

  .input-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .input-field {
    border-color: #00bcd4;
    flex: 1;
    height: 50px;
    margin-right: 10px;
    padding: 10px;
    font-size: 16px;
  }

  .reply-button {
    background-color: #00bcd4;
    color: #fff;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    border: none;
    border-radius: 15px;
  }

  .reply-button:hover {
    background-color: #0097a7;
  }
     /* 用户回复样式 */
  .user-reply {
    display: flex;
    flex-direction: column-reverse;
  }

  .user-reply-content {
    background-color: #00bcd4;
    color: #fff;
    margin-bottom: 530px;
    padding: 10px;
    border-radius: 10px;
    align-self: flex-end;
  }

  .user-reply .avatar-container {
    margin-left: 10px;
  }
</style>
